<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-06 09:16:28
 * @LastEditTime: 2024-06-18 14:54:32
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \chu-meng\client\src\pages\Design\page\entry\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="design">
    <!-- 顶部操作栏 -->
    <div class="design_header">
      <div class="design_header_left">
        <a-button type="text" @click="handleBack" class="backPage">
          <template #icon>
            <ArrowLeftOutlined />
          </template>
        </a-button>
        <div class="siteInfo">
          <div class="name">
            xxx站点
          </div>
          <div class="saveDate">
            保存于18:30:00
          </div>
        </div>
      </div>
      <div class="design_header_center">
        <!-- 中间 -->
      </div>
      <div class="design_header_right">
        <a-space>
          <a-button type="text" title="撤销">
            <template #icon>
              <RotateLeftOutlined />
            </template>
          </a-button>
          <a-button type="text" title="撤回">
            <template #icon>
              <RotateRightOutlined />
            </template>
          </a-button>
          <a-button type="text">
            历史
          </a-button>
          <a-button type="text">
            预览
          </a-button>
          <a-button type="text">
            发布
          </a-button>
          <a-button type="primary">
            提交
          </a-button>
        </a-space>
      </div>
    </div>
    <!-- 主体区 -->
    <div class="design_content">
      <!-- 功能bar -->
      <div class="domainBar">
        <ul>
          <li v-for="(item, index) in DOMAIN_OPTIONS" :key="index" :class="{active: domainActive === item.value}" @click="handleClickDomain(item)">
            <FilePptOutlined />
            <div class="name">{{item.label}}</div>
          </li>
        </ul>
      </div>
      <!-- 边栏 -->
      <div class="sidebarArea">
        <!-- 视图 边栏 -->
        <ViewSidebar v-show="domainActive === 'VIEW'" ref="ViewSidebarRef"></ViewSidebar>
        <!-- 资产 边栏 -->
        <ComponentSidebar v-show="domainActive === 'COMPONENT'" ref="ComponentSidebarRef"></ComponentSidebar>
        <!-- 数据 边栏 -->
        <DataSidebar v-show="domainActive === 'DATA'" ref="DataSidebarRef"></DataSidebar>
      </div>
      <!-- 设计区域 -->
      <div class="designArea">
        <DesignArea ref="DesignAreaRef"></DesignArea>
      </div>
      <!-- 配置区域 -->
      <div class="configArea">
        <ConfigArea ref="ConfigAreaRef"></ConfigArea>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  ArrowLeftOutlined,
  RotateLeftOutlined,
  RotateRightOutlined,
  FilePptOutlined
} from '@ant-design/icons-vue'
import { DOMAIN_OPTIONS } from '../../config/index.js'

import ViewSidebar from '../../components/SidebarArea/ViewSidebar/index.vue'
import ComponentSidebar from '../../components/SidebarArea/ComponentSidebar/index.vue'
import DataSidebar from '../../components/SidebarArea/DataSidebar/index.vue'

import DesignArea from '../../components/DesignArea/index.vue'
import ConfigArea from '../../components/ConfigArea/index.vue'

const router = useRouter()

const domainActive = ref('COMPONENT')

// 点击某个功能bar
const handleClickDomain = (row) => {
  domainActive.value = row.value
}

// 返回
const handleBack = () => {
  router.back()
}

</script>

<style lang="scss" scoped>
.design{
  background: #fff;
  &_header{
    height: 56px;
    padding: 0 24px;
    display: flex;
    // justify-content: flex-end;
    box-shadow: 0 2px 4px rgba(49,70,102,.1);
    position: relative;
    z-index: 9;
    // justify-content: space-between;
    &_left{
      display: flex;
      align-items: center;
      flex: 1 1 0%;
      .backPage{
      }
      .siteInfo{
        padding: 0 12px;
        .name{
        }
        .saveDate{
          margin-top: 5px;
          font-size: 12px;
          color: #999;
        }
      }
    }
    &_center{
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    &_right{
      display: flex;
      justify-content: flex-end;
      flex: 1 1 0%;
      align-items: center;
    }
  }
  &_content{
    height: calc(100vh - 56px);
    display: flex;
    .domainBar{
      width: 56px;
      border-right: 1px solid #f0f0f0;
      padding: 24px 0;
      ul {
        li{
          cursor: pointer;
          text-align: center;
          .anticon{
            display: block;
            width: 34px;
            height: 34px;
            line-height: 34px;
            margin: 0 auto;
            border-radius: 8px;
            font-size: 20px;
          }
          .name{
            margin: 8px 0 24px;
            font-size: 12px;
          }
        }
        li:hover,
        li.active{
          .anticon{
            color: #1055ff;
            background-color: #ebf3ff;
          }
        }
      }
    }
    .sidebarArea{
      width: 250px;
      border-right: 1px solid #f0f0f0;
    }
    .designArea{
      flex: 1;
      background: rgb(248, 249, 253);
    }
    .configArea {
      width: 250px;
      border-left: 1px solid #f0f0f0;
    }
  }
}
</style>
